<template>
  <div class="detail">
    <div class="nav">
      <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
      <span>/</span>
      <nuxt-link :to="{path: '/news/1'}">资讯动态</nuxt-link>
      <span>/</span>
      <div>
        {{ info.detail.title }}
      </div>
    </div>
    <section class="detail-content">
      <div class="detail-content-left">
        <h1 class="detail-content-left-title" id="test">
          {{ info.detail.title }}
        </h1>
        <div class="detail-content-left-time">
          <span class="detail-content-left-time-type">{{ info.detail.type }}</span>
          <span class="detail-content-left-time-text">{{ info.detail.createTime }}</span>
        </div>
        <article class="detail-content-left-des" v-html="info.detail.body"></article>
        <div class="detail-content-left-btns">
          <nuxt-link v-if="info.prev" :to="{ path: `/news/detail/${info.prev.id}` }" class="detail-content-left-btns-btn">
            <div class="detail-content-left-btns-btn-action">上一篇</div>
            <div class="detail-content-left-btns-btn-content">{{ info.prev ? info.prev.title : '无' }}</div>
          </nuxt-link>
          <div v-else class="detail-content-left-btns-btn">
            <div class="detail-content-left-btns-btn-action">上一篇</div>
            <div class="detail-content-left-btns-btn-content">{{ info.prev ? info.prev.title : '无' }}</div>
          </div>
          <nuxt-link v-if="info.next" :to="{ path: `/news/detail/${info.next.id}` }" class="detail-content-left-btns-btn">
            <div class="detail-content-left-btns-btn-action">下一篇</div>
            <div class="detail-content-left-btns-btn-content">{{ info.next ? info.next.title : '无' }}</div>
          </nuxt-link>
          <div v-else class="detail-content-left-btns-btn">
            <div class="detail-content-left-btns-btn-action">下一篇</div>
            <div class="detail-content-left-btns-btn-content">{{ info.next ? info.next.title : '无' }}</div>
          </div>
        </div>
      </div>
      <aside class="detail-content-right">
        <div class="detail-content-right-title">
          <span class="detail-content-right-title-icon"></span>
          <span class="detail-content-right-title-text">热门文章</span>
        </div>
        <div class="detail-content-right-item" v-for="(val, index) in hotNews" :key="index">
          <div class="detail-content-right-item-title" @click="btnDetail(val.id)">
            <nuxt-link :to="{ path: `/news/detail/${val.id}` }">{{ val.title }}</nuxt-link>
          </div>
          <div class="detail-content-right-item-time">
            {{ val.type }} | {{ val.createTime }}
          </div>
        </div>
      </aside>
    </section>
  </div>
</template>

<script>
import axios from 'axios'
import $ from 'jquery'
export default {
  data () {
    return {
      info: {},
      hotNews: []
    }
  },
  async asyncData (context) {
    // 详情
    const detail = await axios.get(`https://${process.env.VUE_APP_TITLE == 'test' ? 'test.' : '' }api.dingdingzn.com/dms/common/news/detail?token=f23f6eec9b2107d441000d66d80f5541&id=${context.params.id}`, "GET").then(res => {
      return res.data.data
    })
    // 热门文章
    const hotNews = await axios.get(`https://${process.env.VUE_APP_TITLE == 'test' ? 'test.' : '' }api.dingdingzn.com/dms/common/news/hot?token=f23f6eec9b2107d441000d66d80f5541`, "GET").then(res => {
      return res.data.data.news
    })
    return {
      info: detail,
      hotNews
    }
  },
  mounted () {
    this.$nextTick(() => {
      $('.detail-content-left-des').find('img').attr('width', '100%').css({'margin-bottom': '1rem'})
    })
  },
  methods: {
    btnDetail (val) {
      if (val) {
        this.$router.push({ path: `/news/detail/${val}` })
      }
    }
  },
  head() {
    return {
      title: this.info.detail.title + '-叮叮充电桩',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.info.detail.desc
        },
        {
          hid: 'description',
          name: 'description',
          content: this.info.detail.desc
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
@media screen and (min-width: 750px)
  .detail
    width: 100%
    height: auto
    .nav
      width: 1180px
      margin: 20px auto 0px
      font-size: 14px
      a
        text-decoration: none
        color: rgba(48, 54, 64, 0.5)
        &:hover
          color: #F57033
      span
        margin: 0 4px
      div
        width: 300px
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
    .detail-content
      width: 1180px
      margin: 30px auto 16px
      display: flex
      flex-direction: row
      justify-content: space-between
      .detail-content-left
        width: 780px
        .detail-content-left-title
          color: #282C32
          font-size: 32px
          line-height: 42px
          margin-bottom: 24px
          overflow: hidden
          text-overflow: ellipsis
          display: -webkit-box
          -webkit-line-clamp: 2
          -webkit-box-orient: vertical
        .detail-content-left-time
          margin-bottom: 50px
          .detail-content-left-time-type
            color: #3182F3
            font-size: 12px
            line-height: 16px
            background: #F2F4F5
            border-radius: 4px
            padding: 2px 8px
            margin-right: 16px
          .detail-content-left-time-text
            color: rgba(48, 54, 64, 0.7)
            font-size: 14px
            line-height: 20px
        .detail-content-left-img
          width: 100%
          margin-bottom: 30px
        .detail-content-left-des
          color: rgba(48, 54, 64, 1)
          font-size: 16px
          line-height: 30px
          margin-bottom: 40px
          /deep/ p
            /deep/ img
              width: 100%
          /deep/ img
            width: 100%
        .detail-content-left-btns
          width: 780px
          height: 48px
          display: flex
          flex-direction: row
          justify-content: space-between
          margin-bottom: 80px
          .detail-content-left-btns-btn
            width: 380px
            height: 46px
            border: 1px solid #E6E6E6
            text-align: center
            line-height: 46px
            border-radius: 4px
            font-size: 14px
            color: #282C32
            cursor: pointer
            display: flex
            flex-direction: row
            justify-content: space-around
            text-decoration: none
            .detail-content-left-btns-btn-action
              color: rgba(48, 54, 64, 0.7)
              margin-left: 50px
            .detail-content-left-btns-btn-content
              width: 200px
              overflow: hidden
              text-overflow: ellipsis
              white-space: nowrap
              margin-right: 50px
      .detail-content-right
        width: 274px
        .detail-content-right-title
          display: flex
          flex-direction: row
          margin-top: 180px
          margin-bottom: 32px
          .detail-content-right-title-icon
            width: 4px
            height: 24px
            background: #F57033
            margin-right: 12px
            margin-top: 6px
          .detail-content-right-title-text
            line-height: 32px
            font-size: 24px
            color: #282C32
        .detail-content-right-item
          margin-bottom: 24px
          .detail-content-right-item-title
            width: 274px
            line-height: 24px
            font-size: 16px
            color: #282C32
            margin-bottom: 8px
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            cursor: pointer
            a
              text-decoration: none
              color: rgba(40, 44, 50, 1)
              &:hover
                color: #F57033
          .detail-content-right-item-time
            line-height: 20px
            font-size: 14px
            color: rgba(48, 54, 64, 0.7)
</style>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .detail
    width: 100vw
    height: auto
    .nav
      width: 90vw
      margin: 0 auto
      font-size: 14px
      a
        text-decoration: none
        color: rgba(48, 54, 64, 0.5)
      span
        margin: 0 4px
        color: rgba(48, 54, 64, 0.5)
      div
        width: 200px
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
    .detail-content
      width: 90vw
      margin-left: 5vw
      margin-top: 10px
      .detail-content-left
        width: 90vw
        .detail-content-left-title
          color: #282C32
          font-size: 28px
          line-height: 32px
          margin-bottom: 14px
        .detail-content-left-time
          margin-bottom: 20px
          .detail-content-left-time-type
            color: #3182F3
            font-size: 12px
            line-height: 16px
            background: #F2F4F5
            border-radius: 4px
            padding: 2px 8px
            margin-right: 6px
          .detail-content-left-time-text
            color: rgba(48, 54, 64, 0.7)
            font-size: 14px
            line-height: 20px
        .detail-content-left-img
          width: 90vw
          margin-bottom: 20px
        .detail-content-left-des
          color: rgba(48, 54, 64, 1)
          font-size: 16px
          line-height: 30px
          margin-bottom: 40px
          /deep/ p
            /deep/ img
              width: 100%
          /deep/ img
            width: 100%
        .detail-content-left-btns
          width: 90vw
          height: 32px
          display: flex
          flex-direction: row
          justify-content: space-between
          margin-bottom: 20px
          .detail-content-left-btns-btn
            width: 43vw
            height: 42px
            line-height: 20px
            border: 1px solid #E6E6E6
            text-align: center
            border-radius: 4px
            font-size: 12px
            color: #282C32
            cursor: pointer
            .detail-content-left-btns-btn-action
              color: rgba(48, 54, 64, 0.7)
            .detail-content-left-btns-btn-content
              width: 30vw
              margin: 0 auto
              overflow: hidden
              text-overflow: ellipsis
              white-space: nowrap
              font-size: 10px
      .detail-content-right
        width: 274px
        .detail-content-right-title
          display: flex
          flex-direction: row
          margin-top: 30px
          margin-bottom: 32px
          .detail-content-right-title-icon
            width: 4px
            height: 24px
            background: #F57033
            margin-right: 12px
            margin-top: 6px
          .detail-content-right-title-text
            line-height: 32px
            font-size: 24px
            color: #282C32
        .detail-content-right-item
          margin-bottom: 24px
          .detail-content-right-item-title
            width: 90vw
            line-height: 24px
            font-size: 16px
            margin-bottom: 8px
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            a
              text-decoration: none
              color: #282C32
          .detail-content-right-item-time
            line-height: 20px
            font-size: 14px
            color: rgba(48, 54, 64, 0.7)
</style>